<template>
  <view class="contain">
    <scroll-view scroll-y="true" class="ul">
      <uni-list :border="true">
        <uni-list-chat
          v-for="(item, index) in 5"
          :key="index"
          title="cv法师"
          avatar="https://pic1.zhimg.com/80/v2-7c6505eed9db133f0d85db3315335864_1440w.webp"
          note="您收到一条新的消息"
          time="2020-02-02 20:20"
          badge-positon="right"
          badge-text="99"
          :clickable="true"
          @click="chatHandle"
        ></uni-list-chat>
      </uni-list>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import stateBar from '@/components/navbar/src/statu-bar/statusBar.vue'
import myTarbar from '@/components/tarbar/src/index.vue'
const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const chatHandle = () => {
  uni.navigateTo({
    url: '/pages/message/chat/index',
  })
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.ul {
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding-top: 20rpx;

  .li {
    width: 100%;
    height: 120rpx;
    display: flex;
    box-sizing: border-box;
    padding: 0 30rpx;
    margin-bottom: 30rpx;

    .image-box {
      width: 120rpx;
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      > image {
        width: 95%;
        height: 95%;
        border-radius: 50%;
      }
    }
    .context-box {
      width: calc(100% - 120rpx);
      height: 120rpx;
      background-color: rgb(255, 255, 255);

      .context {
        width: 100%;
        height: calc(100% - 1rpx);
        display: flex;
        box-sizing: border-box;
        padding: 0 20rpx;

        .txt {
          width: 80%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .h1 {
            font-weight: 700;
            margin-bottom: 20rpx;
            color: #202020;
          }

          .msg {
            font-size: 0.8rem;
            color: #202020;
          }
        }

        .time-box {
          width: 20%;
          font-size: 0.7rem;
        }
      }

      .divider {
        width: 100%;
        height: 0.5rpx;
        background-color: rgb(226, 226, 226);
      }
    }
  }
}
</style>
